<template>
	<view class="padding30rpx">
		<u-search :animation="true" action-text="取消" :clearabled="true" placeholder="请输入关键字" v-model="keyword"
			@custom="cancel" @search="confrim"></u-search>
		<view style="padding-top: 20rpx;" v-if="dataList.length>0">
			<view class="term-flex dis" v-for="(item,index) in dataList" :key="index">
				<image class="term-flex-img" :src="item.imgName"></image>
				<view style="width: 70%;">
					<view class="term-flex-tit">
						{{item.name}}
					</view>
					<view class="dis" style="margin-top: 50rpx;">
						<view class="term-left">学习币：{{item.currency}}</view>
						<view class="term-right" @tap="look(item)">查看详情</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="dataList.length<1" style="padding-top: 300rpx;" class="u-p-b-100">
			<u-empty icon-size="280" text="暂无数据~" src="/static/images/noneList.png"></u-empty>
		</view>
		<view class="u-padding-20" v-else>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				status: 'nomore',
				iconType: 'flower',
				page: 0,
				list: 15,

				dataList: [],
				//岗位ID
				gid: ''
			}
		},

		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			console.log('触底了')
			setTimeout(() => {
				this.dataList += 10;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		onLoad(option) {
			this.gid=option.pid||'';
			if(option.pid){
				uni.setNavigationBarTitle({
					title:'推荐课程'
				})
			}
		},
		methods: {
			//课程详情
			look(i) {
				console.log('123')
				uni.navigateTo({
					url: '/pages/term/course/course?id=' + i.id
				})
			},
			//搜索
			confrim() {
				this.status = 'loading'
				this.$http.get('app/CurriculumContrller/selectSearchCourse', {
					names: this.keyword,
					gid: this.gid
				}).then(res => {
					if (res.code == 200) {
						this.dataList = res.data;
						if (res.data.length < 1) {
							this.$mHelper.toast('搜索结果为空~')
						}
					} else {
						// if (res.data.length < this.pageSize) this.status = 'nomore';
						// else this.status = 'loadmore';
						this.$mHelper.toast(res.message)
					}
					this.status = 'nomore'
				})
				return
				uni.request({
					method: 'GET',
					url: this.$api + '/app/CurriculumContrller/selectSearchCourse',
					data: {
						names: this.keyword,
						gid: this.gid
					},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 401) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							})
						}
						if (res.data.code == 200) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					}

				})
			},
			//取消搜索
			cancel() {
				uni.navigateBack(1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.term-flex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;

		.term-flex-img {
			width: 180rpx;
			height: 180rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}

		.term-flex-tit {
			font-size: 30rpx;
			color: #333333;

		}

		.term-left {
			background: #D9F6FF;
			font-size: 24rpx;
			line-height: 45rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 0 10rpx;
			color: #00A29A;
		}

		.term-right {
			border: 1rpx solid #00A29A;
			color: #00A29A;
			font-size: 24rpx;
			padding: 4rpx 15rpx;
		}
	}
</style>
